@media screen  and (min-device-width: 200px) and (max-device-width:5000px) {


    #view{

        /*width: 99vw;*/
        /*height: 99vh;*/
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        height: 100vh;
        /*overflow: hidden;*/
        overflow-x: hidden;
        overflow-y: auto; /* 确保垂直滚动条 */
        /*background: #0264e7;*/

    }

    #view-head{
        /*background: yellow;*/
        flex: 0 0 11rem;

    }
    .view-select-user{
        /*background: #6aee59;*/
        flex: 0 0 100%;
        /*height: 500rem;*/


    }
    .view-select-comments{
        /*background: #dcecd9;*/
        flex: 0 0 100%;
        /*height: 500rem;*/
        height: 70rem;
        /*position: relative;*/
        /*left: 100%;*/
        /*top: 0%;*/

    }

    #view-van-tabs-input2{
        background: #7a3a9a;
        display: block;
        width: 23rem;
        height: 7rem;
        position: absolute;
        top: 76rem;
        left: 74rem;

        z-index: 10;
    }
    #view-select{
        display: flex;
        background: white;
        height: 11rem;
        width: 100%;
        align-items: center;
        /*box-shadow:  0px 9px 11px -5px rgba(35, 34, 27, 0.5);*/

        position: sticky;
        top: 0;
        /*background-color: #ffffff; !* 可以根据需要设置背景色 *!*/
        /*padding: 10px;*/
        z-index: 1000; /* 如果需要将其置于其他元素之上，可以设置一个 z-index */


    }

    .view-select-button{
        flex: 0 0 15rem;
        /*background: #0264e7;*/
        margin-left: 7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        /*margin: 0 auto;*/
    }

    .view-select-button-font{
        display: block;
        margin: 0 auto;

        font-family: HYKaiti;
        font-size: 4rem;



    }
    .input-field {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .faoltInput{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
    #view-select-button-body{
        flex: 0 0 51rem;
        display: flex;
        position: relative;



    }

    .view-select-button-input-body{
        display: flex;
        flex: 0 0 38rem;

        flex-direction: row-reverse;
        margin-left: 6rem;

    }
    .view-select-button-input{
        background: #f4f4f5;
        flex: 0 0 38rem;

        height: 7rem;
        border-radius: 12rem;
        display: flex;
        flex-direction: row-reverse;
        /*margin-left: 6rem;*/
        /*margin-right: 13rem;*/
        overflow: hidden;

        transition: flex 0.5s ease; /* 使用过渡属性 */
        border: 1px solid #e9e9eb; /* 设置边框样式 */

    }
    .view-select-button-input-font-icon{
        float: left;
        position: absolute;
        top: 26%;
        left: 35%;
    }
    .view-select-button-input-dan{
        padding-left: 3rem;
        height: 100%;
        flex: 0 0 10rem;
        background: white;
        position: relative;
        display: flex;
        align-items: center;

        color: #c8c9cc;

    }
    .view-select-button-input-body-msg{

        text-indent: 1rem;

        font-size: 3.5rem;
        text-overflow: ellipsis; /* 显示省略号 */

        color: #c8c9cc;
        display: -webkit-box;
        line-height: 7rem;
        -webkit-box-orient: vertical;
        /*两行后省略*/
        -webkit-line-clamp: 1;
    }
    .view-select-button-input-body-msgFont{
        display: block;
        margin-right: 2rem;
    }
    .expanded {
        flex: 0 0 10rem;
        /*margin-left: 27rem;*/
        background: #e9e9eb;
        transition: flex 0.5s ease /* 使用过渡属性 */

    }

    #view-van-tabs{
        margin-top: -9rem;
    }
    /*
    van-tabs__nav--complete
    */
    .van-tabs__nav--complete[role="tablist"]{
        display: none;
    }
    .clickable {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    #underline {
        position: absolute;
        width: 15rem; /* 下划线的初始宽度 */
        height: 2px; /* 下划线的高度 */
        background-color: #0264e7; /* 下划线的颜色 */
        transition: transform 0.5s ease; /* 使用过渡属性 */
        margin-top: 8rem;


    }


    @keyframes flyInR {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

    .fly-inR {
        animation: flyInR 0.3s forwards;
    }
    @keyframes flyInL {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .fly-inL {
        animation: flyInL 0.3s forwards;
    }



    @keyframes flyInRR {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0%);
        }
    }

    .fly-inRR {
        animation: flyInRR 0.2s forwards;
    }
    @keyframes flyInLL {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(0);
        }
    }

    .fly-inLL {
        animation: flyInLL 0.3s forwards;
    }



    #view-select-context{
        display: flex;
        /*height: auto;*/
        flex: 1 1 5rem;
        /*background: yellow;*/
        /*overflow-y: auto;*/
       /*height: 100%;*/

        height:auto!important;
        height:200px;
        min-height:200px;

        /*flex-direction: column;*/
    }


    #inputDm {
        display: flex;
        background: white;
        height: 9rem;
       align-items: center;
        z-index: 10000;


        border-top: 1px solid #e9e9eb; /* 绘制线条 */
        border-bottom: 1px solid #e9e9eb; /* 绘制线条 */
        /*top:544px*/

    }

    #inputDm-input{
        /* 去除默认样式 */
        border: none;
        outline: none;
        flex: 0 0 80rem;
        height: 8.5rem;
        margin: 0 auto;
        text-indent: 6rem;
        font-size: 3.8rem;
        color: #c8c9cc;
        background: #e9e9eb;
        border-radius: 4rem;
    }

    #inputDmSelect{
        /*padding-top: 2rem;*/
        /*width: 100%;*/
        /*position: fixed;*/
        background: #e9e9eb;

        /*height: 999px;*/
        /*top: 579px;*/
        display: flex;
        flex-direction: column;
    }

    .inputDm-icon1{
        margin-left: 1rem;
    }
    .inputDm-icon2{
        margin-right: 2rem;

    }

/*    弹幕发送框相关 */
    .inputDm-body{
        flex: 0 0 8rem;
        margin: 1rem 3rem;
        /*background: #0264e7;*/
        display: flex;
        align-items: center;
        /*background: #e9e9eb;*/

    }
    .inputDm-body-font{
        margin-right: 2rem;
        /*background: #6aee59;*/
    }
    #inputDm-body-font-select{
        width: 31rem;
        white-space: nowrap;
    }
    #inputDm-bottom{
        flex: 1 1 1rem;

    }

    .inputDm-body-font-color{
        width: 7rem;
        height: 5rem;
        background: black;
        border-radius: 1.2rem;
        margin-top: 3rem;

        /*border: 1px solid #0264e7; */
        border: 1px solid red;
    }

    #inputDm-body-color-select{
        flex: 0 0 5rem;

    }


    #nnnn{
        width: 100%;
        height: 12rem;
        background: blue;
        /*z-index: 9999;*/
    }

    #view-select-user-search{
        flex: 1 1 1rem;
        overflow-y: auto;
    }














}